<template>
	<view class="page_order_det">
		<view class="top"> </view>
		<view class="body">
			<view class="notice">
				<u-alert type="primary" :description="description"></u-alert>
			</view>
			<view class="text_box">
				<view class="title">
					事实经过：
				</view>
				<u--textarea v-model="pass" height="140"
					placeholder="我与 xxx 在 2022 年 10 月签订一份为期一年的房屋租赁合同，其中我为租户、xxx 为中介，租金为 6300 元每月压一付一，2023 年 3 月 xxx 单方面解除合同，导致我无法继续居住并且拒绝退还押金，多次尝试联系 xxx 均未得到回应"></u--textarea>
				<view class="title">
					诉求：
				</view>
				<u--textarea v-model="demand" height="140"
					placeholder="要求 xxx 立即退还押金、利息，赔偿一个月租金等额违约金，赔偿误工费、律师费、诉讼费等费用"></u--textarea>


				<view class="title">
					例如：
					<u-tag text="租赁纠纷" plain @click="To(1)"> </u-tag>
					<u-tag text="劳动纠纷" plain @click="To(2)"> </u-tag>
					<u-tag text="离婚纠纷" plain @click="To(3)"> </u-tag>

				</view>

				<view class="tips">
					小提示：尽量不要使用个人真实信息，可以使用 “ x 先生 / 女士” 等方式代替
				</view>

				<view class="btn">
					<view class="btn_l" @click="clear()">
						清除
					</view>
					<view class="btn_r" @click="generate()">
						生成
					</view>
				</view>

			</view>
		</view>






	</view>
</template>

<script>
	import $H from '@/common/js/request.js';

	export default {
		data() {
			return {
				id: '',
				mail: '',
				Order: {},
				Goods: {},
				timeData: {},
				description: '维权律师每天为大家生成 200+ 封起诉书，希望大家能支持这个项目，让更多人可以长期受益。谢谢！',
				pass: '',
				demand: ''
			};
		},
		onLoad(opt) {
			// this.id = opt.id;
			// this.getData();
		},
		methods: {
			async getData() {
				try {
					const res = await $H.post('order/contractdetail', {
						id: this.id
					}, {
						token: true
					});
					this.Order = res.data;
					this.Goods = res.data.goods;
				} catch (error) {
					// 处理错误
				}
			},
			onChange(e) {
				this.timeData = e;
			},
			Popdispaly() {
				this.Popshow = true
			},
			Popclose() {
				this.Popshow = false
			},
			Popopen() {},
			To(number) {
				if (number === 1) {
					this.pass =
						'我与 xxx 在 2022 年 10 月签订一份为期一年的房屋租赁合同，其中我为租户、xxx 为中介，租金为 6300 元每月压一付一，2023 年 3 月 xxx 单方面解除合同，导致我无法继续居住并且拒绝退还押金，多次尝试联系 xxx 均未得到回应'
					this.demand = '要求 xxx 立即退还押金、利息，赔偿一个月租金等额违约金，赔偿误工费、律师费、诉讼费等费用'
				} else if (number === 2) {
					this.pass = '自 2022 年 10 月起我在 xxx 公司担任软件开发工程师并签订一份为期三年的劳动合同，在职期间 xxx 公司以未转正为由拒绝为我缴纳社保直至 6 个月试用期满'
					this.demand = '要求 xxx 公司为我一次性补缴 6 个月社保、赔偿半个月薪资，并且立即解除劳动关系合同'
				} else if (number === 3) {
					this.pass = '我与 xxx 在 2022 年 10 月结为夫妻，并于 2022 年 11 月 登记、办理结婚证，结婚以后 xxx 长期对我进行家庭暴力，并且多次将夫妻共同财产赠予第三者'
					this.demand = '要求 xxx 赔偿我精神损失费、医药费、律师费、诉讼费等共计 74888 元，要求 xxx 退还 34000 元夫妻共同财产，要求判处立即离婚'
				} else if (number === 4) {
					this.pass = 'xxx 长期在社交平台（包括但不限于微博、微信朋友圈、QQ 空间）发表对我侮辱、谩骂的言论，对我造成极大的心理伤害和社会影响，严重侵犯了我的人格权、肖像权、名誉权等合法权益'
					this.demand = '要求 xxx 立即停止损害我的合法权益、公开道歉并公示 1 个月，要求 xxx 赔偿我精神损失费、误工费、律师费、诉讼费等共计 68898 元'
				}
			},
			clear() {
				this.pass = ''
				this.demand = ''
			},
			async generate() {
				
				if (this.pass === '') {
					return uni.showToast({
						icon: "none",
						title: "请输入事情经过！"
					})
				}

				if (this.demand === '') {
					return uni.showToast({
						icon: "none",
						title: "请输入您的诉求！"
					})
				}
				
				uni.showLoading({
					title: '正在生成中...',
					icon: "none"
				})
				
				try {
					const res = await $H.post('tools/billa', {
						id: this.id,
						mail: this.pass,
						demand: this.demand
					}, {
						token: true
					});
					
					uni.setStorageSync('billa',res.data.data)
					
					uni.hideLoading()
					
					uni.navigateTo({
						url: '/tools/billa/result'
					})

				} catch (error) {
					// 处理错误
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}

	.page_order_det {
		position: relative;

		.top {
			width: 100%;
			height: 548rpx;
			margin-top: -44px;
			background: linear-gradient(180deg, #e9e7ef 80%, #f0f0f4 100%);
		}

		.body {
			position: absolute;
			top: 100rpx;
			width: 100%;
			padding-bottom: 140rpx;

			.notice {
				margin: 0px 15px 0px 15px;
			}

			.text_box {
				margin: 15px;

				.title {
					margin-top: 10px;
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			.tips {
				margin-top: 15px;
				font-size: 12px;
				color: #666;
			}
		}
	}

	.btn {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 40px;

		.btn_l {
			width: 45%;
			height: 50px;
			text-align: center;
			color: #fff;
			line-height: 50px;
			border-radius: 15px;
			background: #1775ff;
			// box-shadow: 1px 12px 19px rgba(254, 53, 49, .37);
		}

		.btn_r {
			width: 45%;
			height: 50px;
			text-align: center;
			color: #fff;
			line-height: 50px;
			border-radius: 15px;
			background: linear-gradient(270deg, #fe3531, #ff8315);
		}
	}
</style>